import React, { useEffect, useRef, useState } from "react";
import { SortableDevTree, SortableDevGrid, LayoutB, DevGridSearchIpt } from '~/public/cpas-ui';
import { columns, customers, employees, products, tasks } from "./SimpleData";
import { CheckBox } from 'devextreme-react/check-box';
import AntTabs, { HocVerticalLeftStyleTab, HocVerticalRightStyleTab } from '~/public/cpas-ui/components-ui/ant-components/AntTab';
import TreeList, {
    Column,
} from 'devextreme-react/tree-list';
import "./index.less"
import { useModel } from "umi";
import { getReportItemsData, getSubjectSDB } from "./service";
import { DevToolBar } from '~/public/cpas-ui';
import { Item } from 'devextreme-react/toolbar';
import { RadioGroup, SelectBox, TextBox } from "devextreme-react";
import { throttle } from "lodash";
import { Radio } from "antd";
import { nanoid10 } from "@/utils";

const DataStructure = (props: any) => {

    const { initialState } = useModel('@@initialState');
    const { dbname } = initialState?.curPart as API.CurPart;

    const { AccountData_ID, DefaultData_ID } = props

    const [treeData, setTreeData] = useState([])
    const [gridData, setGridData] = useState([])
    const [value, setValue] = useState(3);

    const [listDataRef, setListDataRef] = useState([])
    const TreeListRef = useRef<any>()
    const GroupRef = useRef<any>()

    const data = [
        {
            code: 1,
            name: "资产类",
        },
        {
            code: 2,
            name: "负债类",
        },
        {
            code: 3,
            name: "所有者权利类",
        }

    ]

    async function TreeData() {
        const res = await getReportItemsData({
            dbname,
            Data_ID: AccountData_ID ? AccountData_ID : DefaultData_ID,
            ownerReport: '资产负债表',
        });
        setTreeData(res);
    }

    async function GridData() {
        const res = await getSubjectSDB({
            dbname,
            Data_ID: AccountData_ID ? AccountData_ID : DefaultData_ID,
        });
        setGridData(res);
    }

    useEffect(() => {
        TreeData()
        GridData()
    }, [AccountData_ID, DefaultData_ID]);

    const inputSearch = (content: any) => {
        TreeListRef.current.instance.searchByText(content || "");
    }

    const throttleSearch = throttle(inputSearch, 100);

    const getInputValue = (e: any) => {
        const { event } = e;
        throttleSearch(event.target.value)
    }

    function renderTree() {
        return (
            <div style={{ width: '97%', height: '100%' }}>
                <div style={{ height: "40px", width: "257px", display: "flex", marginTop: '4px', alignItems: "center", justifyContent: "center" }}><CheckBox /><span style={{ marginLeft: '8px', fontSize: "14px" }}>仅显示构成项</span></div>
                <div style={{ display: "flex", width: '100%', height: '100%' }}>
                    <HocVerticalLeftStyleTab
                        className='SubjectsTabs'
                        tabPosition='left'
                        tabBarStyle={{ background: '#FFF', }}
                    >
                        {
                            data.map((item: any) => {
                                return <AntTabs.Panel
                                    tab={item.name}
                                    key={item.code}
                                    style={{ marginTop: "5px" }}
                                >
                                </AntTabs.Panel>
                            })
                        }
                    </HocVerticalLeftStyleTab >
                    <div style={{ marginLeft: '5px', marginTop: '5px', width: '100%', height: "94%" }}>
                        <SortableDevTree
                            width='100%'
                            height="100%"
                            key={`itemNames3_${nanoid10()}`}
                            // scrollDirection='both'

                            treeDragEnd={(fromData: any, toData: any) => {
                                console.log("fromData:");
                                console.log(fromData);
                                console.log("toData");
                                console.log(toData);
                            }}
                            // ref={treeRef}
                            group={"treeGrid"}
                            items={treeData}
                            // onItemClick={contextMenuRightClick}
                            dataStructure="plain"
                            displayExpr="displayName"
                            parentIdExpr='PID'
                            keyExpr='ID'
                            rootValue='0'
                            // ContextMenu={menuItems}
                            treeDomId={"itemNames3Dom"}
                            id={"leftTree"}
                        />
                    </div>
                </div>
            </div>
        );
    }

    const onChange = (e: any) => {
        console.log(GroupRef.current);

        setValue(e.target.value);
    };

    function renderList() {
        return (
            <div style={{ display: "flex", flexDirection: "column", marginLeft: '10px', marginTop: '5px', height: '100%', width: "100%" }}>
                <div style={{ width: "94%", height: '44px', }}>
                    <DevToolBar.Default style={{ height: '100%', }}  >
                        <Item location="before">
                            <Radio.Group onChange={onChange} value={value} ref={GroupRef}>
                                <Radio value={1}>未对应科目</Radio>
                                <Radio value={2}>已对应科目</Radio>
                                <Radio value={3}>全部科目</Radio>
                            </Radio.Group>
                        </Item>
                        <Item location="before">
                            <div style={{ display: 'flex', alignItems: "center", justifyContent: "center", marginLeft: "40px" }}>
                                <div style={{ marginRight: "8px" }}>层级:</div>
                                <SelectBox
                                    width={200}
                                    // items={AccountData}
                                    displayExpr='displayName'
                                    valueExpr='displayName'
                                // defaultValue={AccountData[PaperValueId]?.displayName}
                                // ref={SelectRef}
                                // onSelectionChanged={onSelectionChangeds}
                                // onFocusOut={focusEvent}
                                />
                            </div>
                        </Item>
                        <Item location="after">
                            <TextBox onInput={(e: any) => getInputValue(e)} width={200} />
                        </Item>
                    </DevToolBar.Default>
                </div>
                <div style={{ width: "100%", height: "calc(100% - 44px)", display: 'flex' }}>
                    <TreeList
                        className="PublicTreeList"
                        ref={TreeListRef}
                        dataSource={gridData}
                        allowColumnResizing={true}
                        allowColumnReordering={true}
                        showRowLines={true}
                        showBorders={true}
                        keyExpr="ID"
                        parentIdExpr="PID"
                        id="code"
                        height="99%"
                    >
                        <Column dataField="name" width={200} caption="科目名称" alignment="Left" cellRender={(cell: any) => { return <span> {cell.data.code + '-' + cell.data.name}  </span> }} />
                        <Column dataField="KMFX" width={80} caption="方向" alignment="center" />
                        <Column dataField="itemNames3" width={200} caption="对应报表项目" alignment="Left" />
                        <Column />
                    </TreeList>
                    <HocVerticalRightStyleTab
                        className='RightTabs'
                        tabBarStyle={{ background: '#FFF', }}
                    >
                        {
                            data.map((item: any) => {
                                return <AntTabs.Panel
                                    tab={item.name}
                                    key={item.code}
                                    style={{ marginTop: "5px" }}
                                >
                                </AntTabs.Panel>
                            })
                        }
                    </HocVerticalRightStyleTab >
                </div>
            </div >

        );
    }

    return (
        <>
            <LayoutB leftSlotSize={["25%", "10%", "50%"]} leftSlot={renderTree()} rightSlot={renderList()} />
        </>
    )
}

export default DataStructure